<template>
  <div class="cates-box">
    <div class="cates-left">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <ul>
            <li @click="show($event)" class="active">推荐</li>
            <li @click="show($event)">数码</li>
            <li @click="show($event)">女装</li>
            <li @click="show($event)">男装</li>
            <li @click="show($event)">童装</li>
            <li @click="show($event)">家电</li>
            <li @click="show($event)">家居</li>
            <li @click="show($event)">鞋靴</li>
            <li @click="show($event)">食品</li>
            <li @click="show($event)">百货</li>
            <li @click="show($event)">美妆洗护</li>
            <li @click="show($event)">图书</li>
            <li @click="show($event)">箱包</li>
            <li @click="show($event)">母婴</li>
            <li @click="show($event)">珠宝</li>
            <li @click="show($event)">鲜花</li>
            <li @click="show($event)">生鲜</li>
            <li @click="show($event)">鲜花</li>
            <li @click="show($event)">农资</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="cates-right">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <ul>
            <li class="item">
              <div class="cell-box">
                <div class="cell">
                  <h3>排行榜</h3>
                  <div class="cell-box">
                    <router-link to="/home/goodsList/1" tag="div"></router-link>
                    <router-link to="/home/goodsList/2" tag="div"></router-link>
                    <router-link to="/home/goodsList/3" tag="div"></router-link>
                  </div>
                </div>

                <div class="cell">
                  <h3>个性一族</h3>
                  <div class="cell-box2">
                    <router-link to="/home/goodsList/4" tag="div"></router-link>
                    <router-link to="/home/goodsList/5" tag="div"></router-link>
                    <router-link to="/home/goodsList/6" tag="div"></router-link>
                    <router-link to="/home/goodsList/7" tag="div"></router-link>
                    <router-link to="/home/goodsList/8" tag="div"></router-link>
                    <router-link to="/home/goodsList/9" tag="div"></router-link>
                  </div>
                </div>

                <div class="cell">
                  <h3>为您推荐</h3>
                  <div class="cell-box">
                    <router-link to="/home/goodsList" tag="div"></router-link>
                    <router-link to="/home/goodsList" tag="div"></router-link>
                    <router-link to="/home/goodsList" tag="div"></router-link>
                    <router-link to="/home/goodsList" tag="div"></router-link>
                    <router-link to="/home/goodsList" tag="div"></router-link>
                    <router-link to="/home/goodsList" tag="div"></router-link>
                  </div>
                </div>
              </div>
              <h5>---到底了---</h5>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mui from "../../../lib/mui/js/mui.min.js";
export default {
  data() {
    return {
      title: "购物"
    };
  },
  created() {
    this.showTitle(this.title);
  },
  mounted() {
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
      indicators: true //是否显示滚动条
    });
  },
  methods: {
    show(e) {
      var list = e.target.parentElement.children;
      for (var i = 0; i < list.length; i++) {
        list[i].className = "";
      }
      e.target.className = "active";
    },
    showTitle(title) {
      this.$emit("getTitle", title);
    }
  }
};
</script>

<style lang="scss">
$baseColor: #26a2ff;
ul,
li {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
.cates-box {
  display: flex;
  // 设置具体宽高px值，滚动插件才有显示
  height: 577px;
  .mui-scroll-wrapper {
    width: 100%;
  }
  .cates-left {
    width: 80px;
    height: 100%;
    position: relative;
    overflow-y: auto;
    .mui-scroll {
      ul {
        padding: 0;
        margin: 0;
        list-style: none;

        li {
          height: 50px;
          line-height: 50px;
          text-align: center;
          background: #fff;
          color: #000;
          font-size: 14px;
          &.active {
            background: transparent;
            border-left: 4px solid $baseColor;
            color: $baseColor;
          }
        }
      }
    }
  }

  .cates-right {
    flex: 1;
    position: relative;
    margin: 10px;
    padding-bottom: 50px;
    overflow-y: auto;
    .mui-scroll {
      ul {
        .item {
          .cell-box {
            h3 {
              font-size: 14px;
              font-weight: 400;
              margin-bottom: 10px;
            }
            .cell {
              margin-bottom: 15px;
              .cell-box {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                flex-flow: wrap;
                div {
                  flex: 30%;
                  flex-grow: 1;
                  height: 90px;
                  border-radius: 10px;
                  margin-bottom: 5px;
                  &:nth-of-type(3n + 1) {
                    margin-right: 10px;
                  }
                  &:nth-of-type(3n + 2) {
                    margin-right: 10px;
                  }
                  &:nth-of-type(1) {
                    background: red;
                  }
                  &:nth-of-type(2) {
                    background: orange;
                  }
                  &:nth-of-type(3) {
                    background: skyblue;
                  }
                  &:nth-of-type(4) {
                    background: green;
                  }
                  &:nth-of-type(5) {
                    background: yellow;
                  }
                  &:nth-of-type(6) {
                    background: plum;
                  }
                }
              }
              .cell-box2 {
                background: #fff;
                padding: 10px 15px;
                border-radius: 10px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                flex-flow: wrap;
                div {
                  flex: 30%;
                  height: 80px;
                  &:nth-of-type(1) {
                    background: red;
                  }
                  &:nth-of-type(2) {
                    background: orange;
                  }
                  &:nth-of-type(3) {
                    background: skyblue;
                  }
                  &:nth-of-type(4) {
                    background: green;
                  }
                  &:nth-of-type(5) {
                    background: yellow;
                  }
                  &:nth-of-type(6) {
                    background: plum;
                  }
                }
              }
            }
          }
          h5 {
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
